<template>
    <div id="app">
        <Header></Header>
        
        <transition :name="transitionName">
            <router-view class="router" :key="key" />
        </transition>
        <navTab :navStatus="mystatus"></navTab>
    </div>
</template>

<script>
import Vue from 'vue';
import navTab from './components/navTab';
import Header from './components/Header';
export default {
    name: 'App',
    data() {
        return {
            mystatus: 1,
            transitionName: 'slide-right', // 默认动态路由变化为slide-right
            popList: [],
        };
    },
    components: {
        navTab,
        Header,
    },
    computed: {
        key() {
            return this.$route.path + Math.random();
        },
    },
    created(){
        this.$nextTick(() => {
            const componentStore = require('./components');
            componentStore.default.forEach((component) => {
                Vue.component(component.templateName, component.template);
            });
        });
    },
    mounted() {
        
    },
    watch: {
        $route(to, from) {
            //如果to索引大于from索引,判断为前进状态,反之则为后退状态
            this.mystatus = to.path;
            if (to.meta.index > from.meta.index) {
                //设置动画名称
                this.transitionName = 'slide-left';
            } else {
                this.transitionName = 'slide-right';
            }
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        },
    },
};
</script>

<style lang="less" type="text/less">
#app {
    .router {
        // transition: all 0.3s ease;
        // position: absolute;
    }

    .slide-left-enter,
    .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100% 0);
    }
}
</style>
